<template>

  <el-dialog :title="$t('page-trade-refund.apply-list.title')" :visible.sync="visible" width="90%" :close-on-click-modal="false">

    <div>
      <el-form ref="search-box" :model="mainQuery" label-position="left" :inline="true" label-width="90px">

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item :label="$t('page-trade-refund.apply-list.search.tradeNo')" size="mini">
              <el-input placeholder="" v-model="mainQuery.tradeNo" @keyup.enter.native="handleSearch" size="small"
                        clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item :label="$t('page-trade-refund.apply-list.search.terNo')" size="mini">
              <el-input placeholder="" v-model="mainQuery.terNo" @keyup.enter.native="handleSearch" size="small"
                        clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item :label="$t('page-trade-refund.apply-list.search.auditStatus')" size="mini">
              <el-select v-model="mainQuery.auditStatus" size="mini" clearable @change="handleSearch">
                <el-option
                  v-for="item in refundApplyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item :label="$t('page-trade-refund.apply-list.search.createTime')" size="mini">
              <el-date-picker
                size="small"
                v-model="mainQuery.createTimeRange"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="datetimePickerOptions"
                @change="handleSearch"
                 :start-placeholder="$t('page.form.startDate')"
                 :end-placeholder="$t('page.form.endTime')"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="search-btn-box">
        <div class="left">
        </div>
        <div class="right">
          <el-button class="filter-item" icon="" type="default" @click="resetMainData" :loading="mainTable.loading"
                     size="mini">{{$t('page-trade-refund.apply-list.search.reset')}}
          </el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch"
                     :loading="mainTable.loading" size="mini">{{$t('page-trade-refund.apply-list.search.search')}}
          </el-button>
        </div>
      </div>
    </div>

    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :loading="mainTable.loading"
      :rowHandle="mainTable.rowHandle"
    ></d2-crud>

    <template #footer>

      <div style="width: 100%; text-align: left; display: flex;">
        <el-pagination
          style="flex-grow: 1"
          @size-change="handleMainSizeChange"
          @current-change="handleMainPageChange"
          :current-page="mainTable.pagination.currentPage"
          :page-sizes="mainTable.pagination.pageSizes"
          :page-size="mainTable.pagination.pageSize"
          :page-count="mainTable.pagination.pageCount"
          :total="mainTable.pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          :background="true"
        >
        </el-pagination>

        <div style="flex-grow: 0">
          <el-button @click="close" size="mini">{{$t('page-trade-refund.apply-list.footer.close')}}</el-button>
        </div>
      </div>

    </template>

  </el-dialog>

</template>

<script>

  import ApiMain from '@/api/trade.refund'
  import DatetimePickerMixin from '@/mixins/DatetimePickerMixin'

  import {
    isCheckedOptions,
    refundApplyOptions,
  } from "@/const/constant"

  export default {

    mixins: [
      DatetimePickerMixin,
    ],
    components: {},

    data() {
      return {

        isCheckedOptions,
        refundApplyOptions,

        visible: false,

        mainQueryRaw: null,
        mainQuery: {
          mchNo: '',
          terNo: '',
          tradeNo: '',
          auditStatus: 1,
          createTimeRange: null,
        },

        mainTable: {
          loading: false,
          options: {
            border: true,
            stripe: true,
            highlightCurrentRow: true,
            emptyText: this.$t('page-announcement.d2-crud.empty-data'),
            size: 'mini',
          },
          indexRow: null,
          allowSelect: false,
          columns: [
            // 订单号
            {title: this.$t('page-trade-refund.apply-list.col.tradeNo'), key: 'tradeNo', align: 'center', width: '180', showOverflowTooltip: true},
            // 商户号
            // {title: this.$t('page-mch-ter.d2-crud.column-mchNo'), key: 'mchNo', align: 'center', showOverflowTooltip: true},
            // 终端号
            {title: this.$t('page-trade-refund.apply-list.col.terNo'), key: 'terNo', align: 'center', showOverflowTooltip: true},
            // 勾兑状态
            // {
            //   title: '勾兑状态',
            //   key: 'isChecked',
            //   align: 'center',
            //   showOverflowTooltip: true,
            //   formatter: (row, col, val, index) => {
            //     var item = this.isCheckedOptions.find(item => item.value == val);
            //     return !!item ? item.label : "-";
            //   }
            // },
            // 退款金额
            {
              title: this.$t('page-trade-refund.apply-list.col.amount'),
              key: 'amount',
              align: 'right',
              showOverflowTooltip: true,
              formatter: (row, col, val, index) => {
                return (val / 100).toFixed(2);
              }
            },
            // 币种
            {title: this.$t('page-trade-refund.apply-list.col.currency'), key: 'mchTransCurrency', align: 'left', showOverflowTooltip: true},
            // 申请理由
            {title: this.$t('page-trade-refund.apply-list.col.reason'), key: 'reason', align: 'center', showOverflowTooltip: true},
            // 申请时间
            {title: this.$t('page-trade-refund.apply-list.col.createTime'), key: 'createTime', align: 'center', width: "180", showOverflowTooltip: true},
            // 申请状态
            {
              title: this.$t('page-trade-refund.apply-list.col.auditStatus'),
              key: 'auditStatus',
              align: 'center',
              showOverflowTooltip: true,
              formatter: (row, col, val, index) => {
                var item = this.refundApplyOptions.find(item => item.value == val);
                return !!item ? item.label : "-";
              }
            },
            // 驳回理由
            {title: this.$t('page-trade-refund.apply-list.col.auditRemark'), key: 'auditRemark', align: 'center', showOverflowTooltip: true},
          ],
          // rowHandle: {
          //   width: '240',
          //   align: 'center',
          //   fixed: 'right',
          //   custom: [
          //   ]
          // },
          rowHandle: null,
          list: [],
          pagination: {
            currentPage: 1,
            pageSize: 20,
            total: 0,
            pageSizes: [20, 50, 100, 200]
          },
          selectionRow: [],
        },
      }
    },
    computed: {},
    watch: {},
    mounted() {
      this.mainQueryRaw = Object.copy(this.mainQuery);
      this.resetMainData();
    },
    methods: {

      show() {
        this.visible = true;
      },

      close() {
        this.visible = false;
      },

      handleMainSizeChange(val) {
        this.mainTable.pagination.pageSize = val
        this.mainTable.pagination.currentPage = 1
        this.fetchMainData()
      },
      handleMainPageChange(val) {
        this.mainTable.pagination.currentPage = val
        this.fetchMainData()
      },
      resetMainData() {
        this.mainQuery = Object.copy(this.mainQueryRaw)
        this.handleSearch()
      },
      handleSearch() {
        this.mainTable.pagination.currentPage = 1
        this.fetchMainData()
      },

      buildMainQuery() {

        var query = {
          page: this.mainTable.pagination.currentPage,
          limit: this.mainTable.pagination.pageSize,
          search: Object.copy(this.mainQuery),
        }

        return query
      },

      renderMainData(re) {
        this.mainTable.list = re.list
        this.mainTable.pagination.total = re.total
      },

      async fetchMainData() {
      
        this.mainTable.loading = true

        try {
          var re = await ApiMain.applyList(this.buildMainQuery())
          this.renderMainData(re)
        } catch (err) {
        }

        this.mainTable.loading = false
      },

    },

  }
</script>

<style scoped>

</style>
